<template>
	<el-dialog :model-value="visible" width="20%" :z-index="12" @close="cancel">
		<template #header>
			<div class="custom-header">上报</div>
		</template>

		<div class="boardBox">
			<el-form ref="queryForm" label-width="120px" class="mt20" :model="queryParams" :rules="rules">
				<el-form-item prop="standardNumber" label="标准编号:">
					<el-input v-model="queryParams.standardNumber" placeholder="标准编号" style="width: 100%"></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer">
				<el-button type="primary" @click="submit">保存</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'

import { basicInfoApi } from '@/api/bianzhi/index'

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	standardNumber: {
		type: String,
		default: ''
	}
})
const editorValue = ref('<p>maku</p>')
const deptoptions = ref([])
const job_modeoptions = ref([])
const filelist = reactive([])

const queryParams = ref({ standardNumber: '' })
const searchData = ref({ standardNumber: '' })

const emit = defineEmits<{ (event: 'update:visible', value: boolean): void; (event: 'changenumber', value: ''): void }>()
// 获取表单引用
const queryForm = ref(null)
const uploadRef = ref(null)
// 监听 localValue 的变化，通知父组件更新值
watch(
	() => props.visible,
	newValue => {
		if (newValue) {
			nextTick(() => {
				queryParams.value.standardNumber = props.standardNumber ? props.standardNumber : ''
			})
			// const data = { name: '', dept_id: '', position: '', hired_time: '', job_status: '', mobile: '', date: moment().format('YYYY-MM-DD') }
			// queryParams.value = data
		}
	}
)
const info = ref({ url: '', qrcode: '' })
const addvisible = ref(false)

const rules = reactive({
	standardNumber: [{ required: true, message: '请输入标准编号', trigger: 'blur' }]
})

onMounted(() => {})

const submit = () => {
	queryForm.value.validate(valid => {
		if (valid) {
			emit('update:visible', false)
			emit('changenumber', queryParams.value.standardNumber)
			queryParams.value = { ...searchData.value }
		} else {
			console.log('error submit!!')
			return false
		}
	})
}
// const selectedArrRef = ref(null)
// function handleChange(value) {
// 	selectedArrRef.value.togglePopperVisible()
// }

function cancel() {
	emit('update:visible', false)
	queryParams.value = { ...searchData.value }
}
</script>

<style lang="scss" scoped>
.boardBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	overflow-y: scroll;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	-ms-overflow-style: none;
	scrollbar-width: none;

	.tishi {
		font-size: 14px;
		color: #999;
		background-color: #f3f8fb;
		padding: 5px 10px;
		border-radius: 6px;
	}
}
</style>
